<template>
    <div class="container">
      <label class="mysearch">
        <span>关键字</span>
        <el-input v-model="keyword" clearable></el-input>
      </label>
      <div class="mysearch">
        <span>状态</span>
        <el-select
          v-model="value"
          placeholder="请选择"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="clear-btn">
        <el-button @click="handleClear">清除</el-button>
      </div>
      <div class="search-btn">
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </div>
</template>

<script>
import { debounce } from '@/utils'
import { status } from '@/api/hmmm/constants'
export default {
  name: '',
  data () {
    return {
      keyword: '',
      options: [],
      value: ''
    }
  },
  components: {

  },
  created () {
    this.options = [{
      value: '',
      label: '全部'
    }, ...status]
  },
  mounted () {

  },
  watch: {
    keyword () {
      debounce(this.handleSearch, 243)()
    }
  },
  methods: {
    handleClear () {
      this.value = undefined
      this.keyword = ''
      this.$emit('reback')
    },
    handleSearch () {
      const searchInfo = {}
      searchInfo.keyword = this.keyword
      if (typeof this.value === 'number') {
        searchInfo.state = this.value
      }
      this.$emit('submit', searchInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
  .container {
    display: flex;
    justify-content: flex-start;
        .mysearch {
          display: flex;
          justify-content: space-between;
          align-items: center;
            span {
              width: 90px;
              padding-right: 10px;
              font-weight: 700;
              font-size: 14px;
              color: #666;
              text-align: right;
              box-sizing: border-box;
            }
          }
    .clear-btn, .search-btn {
      width: 90px;
      text-align: right;
    }
  }

</style>
